<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
     <script src="./js/jquery.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        font-size: 12px;
      }

      ul {
        list-style: none;
      }

      a {
        text-decoration: none;
      }

      .wrapper {
        width: 298px;
        height: 248px;
        margin: 100px auto 0;
        border: 1px solid pink;
        overflow: hidden;
      }

      #left,
      #center,
      #right {
        float: left;
      }

      #left li,
      #right li {
        background: url(images/lili.jpg) repeat-x;
      }

      #left li a,
      #right li a {
        display: block;
        width: 48px;
        height: 27px;
        border-bottom: 1px solid pink;
        line-height: 27px;
        text-align: center;
        color: black;
      }

      #left li a:hover,
      #right li a:hover {
        background-image: url(images/abg.gif);
      }

      #center {
        border-left: 1px solid pink;
        border-right: 1px solid pink;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <ul id="left">
        <li><a href="#">女靴</a></li>
        <li><a href="#">雪地靴</a></li>
        <li><a href="#">冬裙</a></li>
        <li><a href="#">呢大衣</a></li>
        <li><a href="#">毛衣</a></li>
        <li><a href="#">棉服</a></li>
        <li><a href="#">女裤</a></li>
        <li><a href="#">羽绒服</a></li>
        <li><a href="#">牛仔裤</a></li>
      </ul>
      <ul id="center">
        <li>
          <a href="#"><img src="https://img2.baidu.com/it/u=2839938867,2214035826&fm=253&fmt=auto&app=138&f=JPEG?w=180&h=180" width="200" height="250" /></a>
        </li>
        <li>
          <a href="#"
            ><img src="https://img0.baidu.com/it/u=479512616,1262000779&fm=253&fmt=auto&app=138&f=JPEG?w=184&h=184" width="200" height="250"
          /></a>
        </li>
        <li>
          <a href="#"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi2%2F2565588879%2FO1CN01Djh9dN2FSdNEC1YU8_%21%212565588879.jpg_200x200.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1719618451&t=9f3dfe67e22b75e443d0031e49fb0811" width="200" height="250" /></a>
        </li>
        <li>
          <a href="#"
            ><img src="https://img1.baidu.com/it/u=1507071714,4244106559&fm=253&fmt=auto&app=120&f=JPEG?w=142&h=142" width="200" height="250"
          /></a>
        </li>
        <li>
          <a href="#"><img src="https://img2.baidu.com/it/u=2831142749,2588865011&fm=253&fmt=auto&app=120&f=JPEG?w=142&h=142" width="200" height="250" /></a>
        </li>
        <li>
          <a href="#"><img src="https://img4.haitao.com/promo/2024/04/09/11/20240409110154_618340.jpg%21200" width="200" height="250" /></a>
        </li>
        <li>
          <a href="#"><img src="https://img2.baidu.com/it/u=3376761092,2256229006&fm=253&fmt=auto&app=120&f=JPEG?w=190&h=190" width="200" height="250" /></a>
        </li>
        <li>
          <a href="#"
            ><img src="https://img1.baidu.com/it/u=1753870575,904639830&fm=253&fmt=auto&app=120&f=JPEG?w=171&h=171" width="200" height="250"
          /></a>
        </li>
        <li>
          <a href="#"
            ><img src="https://img4.haitao.com/promo/2024/04/10/17/20240410174016_851039.jpg%21200" width="200" height="250"
          /></a>
        </li>
        <li>
          <a href="#"><img src="https://qny.smzdm.com/202405/11/663ea73bfd03f4809.jpg_a200.jpg" width="200" height="250" /></a>
        </li>
        <li>
          <a href="#"><img src="https://qny.smzdm.com/202405/15/6644944b42ee56824.jpg_a200.jpg" width="200" height="250" /></a>
        </li>
        <li>
          <a href="#"
            ><img src="https://img0.baidu.com/it/u=2219600896,2924581960&fm=253&fmt=auto&app=120&f=JPEG?w=190&h=190" width="200" height="250"
          /></a>
        </li>
        <li>
          <a href="#"><img src="https://img0.baidu.com/it/u=3821182250,1307534206&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200" width="200" height="250" /></a>
        </li>
        <li>
          <a href="#"><img src="https://img0.baidu.com/it/u=1571494089,3814334344&fm=253&fmt=auto&app=120&f=JPEG?w=142&h=142" width="200" height="250" /></a>
        </li>
        <li>
          <a href="#"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01xH2tnE1c9c1MOAE6E_%21%212810893558-0-cib.search.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1719618770&t=0cbc11548ca1c3d161421b55bec9c142" width="200" height="250" /></a>
        </li>
        <li>
          <a href="#"
            ><img src="https://qny.smzdm.com/202311/19/655a1c231056a9179.jpg_d250.jpg" width="200" height="250"
          /></a>
        </li>
        <li>
          <a href="#"
            ><img src="https://image.suning.cn/uimg/b2c/newcatentries/0071585513-000000012428456325_1.jpg_200w_200h_4e?from=mobile" width="200" height="250"
          /></a>
        </li>
        <li>
          <a href="#"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2017%2F615%2F266%2F4174662516_2064905320.search.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1719618855&t=8aafcfd2514bb9b56fa2bc3e7eb13a5d" width="200" height="250" /></a>
        </li>
      </ul>
      <ul id="right">
        <li><a href="#">女包</a></li>
        <li><a href="#">男包</a></li>
        <li><a href="#">登山鞋</a></li>
        <li><a href="#">皮带</a></li>
        <li><a href="#">围巾</a></li>
        <li><a href="#">皮衣</a></li>
        <li><a href="#">男毛衣</a></li>
        <li><a href="#">男棉服</a></li>
        <li><a href="#">男靴</a></li>
      </ul>
    </div>
    <script>
        $(function(){
            $("#left li").mouseover(function(){
             let index=   $(this).index()
              $("#center li").eq(index).show().siblings().hide();
            })

            $("#right li").mouseover(function(){
              let index=   $(this).index()
              $("#center li").eq(index).show().siblings().hide();
            })
        })
    </script>
  </body>
</html>
